<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	.big-box{
		width: 580px;
		
	}
	.sm-box{
		width: 60px;
		height: 60px;
/*		background-color: skyblue;*/
		margin: 2px;
		display: inline-block;
		border-radius: 50%;
		border:2px green solid;
		text-align: center;
		line-height: 60px;
		color: white
	}
	.sm-box:nth-child(2n){
		background-color: black;
	}
	.sm-box:nth-child(2n+1){
		background-color: red;
	}
	</style>
<body>
	<div class="big-box">
		<div class="sm-box">1</div>
		<div class="sm-box">2</div>
		<div class="sm-box">3</div>
		<div class="sm-box">4</div>
		<div class="sm-box">5</div>
		<div class="sm-box">6</div>
		<div class="sm-box">7</div>
		<div class="sm-box">8</div>
		<div class="sm-box">9</div>
		<div class="sm-box">10</div>
		<div class="sm-box">11</div>
		<div class="sm-box">12</div>
		<div class="sm-box">13</div>
		<div class="sm-box">14</div>
		<div class="sm-box">15</div>
		<div class="sm-box">16</div>
		<div class="sm-box">17</div>
		<div class="sm-box">18</div>
		<div class="sm-box">19</div>
		<div class="sm-box">20</div>
		<div class="sm-box">21</div>
	</div>
</body>
</html>
